<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
    function onclickFun(){
        var usernameObj = document.getElementById("username");
        usernameText = usernameObj.value;
        var patt = /^\w{5,12}$/;

        var usernameSpanObj = document.getElementById("usernameSpan");
        usernameSpanObj.innerHTML = "我可以赋值";

        if(patt.test(usernameText)){
            alert("用户名合法！");
            usernameSpanObj.innerHTML = "开始跳转。。。。";
        }
        else{
            alert("用户不合法，请重新输入！");
            usernameSpanObj.innerHTML = "无法跳转。。。。";
        }
    }
    </script>
</head>
<body>
    用户名：<input type = "text" id = "username" value = "zhz"/>
    <span id = "usernameSpan" style = "color:red">

    </span>
    <button onclick = "onclickFun();">较验</button>

</body>
</html>